<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>AnguarJS页面HTML元素控制</title>
		<style>
			body {
				font-family: 'microsoft yahei', Arial, sans-serif;
			}
			
			h1 {
				font-weight: 500;
				font-size: 24px;
			}
			
			table,
			th,
			td {
				border: 1px solid #CFCFCF;
				border-collapse: collapse;
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<div ng-app="">
			<table border="0">
				<tr>
					<th>控制操作</th>
					<th>掩饰元素</th>
				</tr>
				<tr>
					<td>
						<input type="checkbox" ng-model="enableDisableButton" />
					</td>
					<td>
						<button ng-disabled="enableDisableButton">演示按钮</button>
					</td>
				</tr>
				<tr>
					<td><input type="checkbox" ng-model="showHide1">显示右侧按钮</td>
					<td><button class="hide" ng-show="showHide1">演示按钮</button></td>
				</tr>
				<tr>
					<td><input type="checkbox" ng-model="showHide2">隐藏右侧按钮</td>
					<td><button ng-hide="showHide2">演示按钮</button></td>
				</tr>
				<tr>
					<td>
						<p>已点击次数: {{ clickCounter }}</p>
					</td>
					<td><button ng-click="clickCounter = clickCounter + 1">点击计数</button></td>
				</tr>
			</table>
		</div>
		<script src="http://cdn.gbtags.com/angular.js/1.2.20/angular.min.js"></script>
		<script>
		</script>
	</body>

</html>